Vue.component("bilibili",{
    template:`
<div>
      <ul class='nav-login'>
            <template v-if="myinfo==null">
                <li><a href="#" @click.prevent="showLoginWin=true">注册</a></li>
                <li><a href="#" @click.prevent="showLoginWin=true">登录</a></li>
            </template>
            <template v-else>
                <li style="padding: 0px 12px; "><img :src="myinfo.headimg" class="headimg" @click="location.href = '../me.html?id=' + myinfo.id" style="margin-top: 12px"></li>
                <li style="padding: 0px 12px; "><img src="../image/邮件.png" class="headimg" @click="location.href='message.html'" style="margin-top: 10px"></li>
                <li @click="location.href = '../me.html?id=' + myinfo.id">欢迎: {{myinfo.name}}</li>
                <li><a href="#" @click="logout">退出</a></li>
            </template>
        <li class='flag'><a href='upload.html' @click.prevent="goupload">投稿</a></li>
      </ul>
      
      <el-dialog title="登录" :visible.sync="showLoginWin">
          <el-form>
            <el-form-item label="用户名" :label-width="100">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="100">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showLoginWin = false">取 消</el-button>
            <el-button type="primary" @click="login">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</div>    
    
    
    `,
    data(){
        return{
            myinfo:null,
            form:{
                username:"",
                password:"",
            },
            usernameColumn:null,
            showLoginWin: false

        }
    },
    // 创建钩子函数
    created(){
        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            var jwt = sessionStorage.getItem("jwt");
            if (jwt) {
                config.headers.authorization = jwt;
            }
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });


        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            if (response.headers.authorization) {
                sessionStorage.setItem("jwt", response.headers.authorization);
            }
            return response;
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            return Promise.reject(error);
        });

        axios.get("b-user/login/myinfo").then(res=> {
            if (res.data.code == 1) {
                this.myinfo = res.data.data.user;
                this.$emit("logined",this.myinfo);
            }
        });
    },
    methods:{
        a(myinfo){
            this.myinfo = myinfo;
            this.$emit("myinfo",this.myinfo);
        },
        login() {
            axios.get("b-user/login/login", {
                params: this.form
            }).then(res => {
                if (res.data.code == 1) {
                    this.showLoginWin = false;
                    this.$message(res.data.msg);
                    console.log(res.data.data.user.headimg)
                    this.myinfo = res.data.data.user;
                    if(res.data.data.goto){
                        location.href = res.data.data.goto
                    }
                } else {
                    this.$alert(res.data.msg);
                }
            });
        },
        logout(){
            sessionStorage.removeItem('jwt');
            location.reload(false);
        },
        goupload(){
            if(this.myinfo == null){
                this.showLoginWin = true;
            }else{
                location.href = "upload.html"
            }
        },
        me(){
            location.href = '#';
        },
    }

})